<template>
    <div class="4-8box">
        <header class='b_header'>
            <p>{{headData.title}}</p>
            <img :src="headData.url" height="38" width="38" alt="" />
        </header>
        <section class='zf_center'>
            <div class="b_bgzfmm">
              <p>{{zfData.title}}</p>
            </div>
            <div class="zhifulan">
              <div>
                <span class="zhifu">{{zfData.zhifu}}</span>
                <input type="tex" value="请输入支付密码" />
              </div> 
              <div>
                <span class="queren">{{zfData.queren}}</span>
                <input type="text" value="请确认支付密码"/>
              </div>
            </div>
        </section>

        <footer class="footer">
          <div class="f_logo">
            <img :src="footData.url" height="33" width="36" alt="" />
            <p class="content">{{footData.text}}</p>
          </div>
          <div class="f_bottom">
            <button class="f_btn">确定</button>
          </div>
        </footer>
    </div>
</template>

<script>
export default {
  name: 'box',
  data () {
    return{
        headData:{
          title:'设置支付密码',
          url:'../../static/img/4-8fanhuijiantou.png'
        },
        zfData:{
          title:'请谨慎保管支付密码',
          zhifu:'支付密码',
          queren:'确认密码'
        },
        footData:{
          url:'../../static/img/4-8tu.png',
          text:'资金支付由民生电商全程把控',
        }
    }
  },
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
   @import ".././assets/less/4-8xiugaizhifumima.less";
   @import ".././assets/css/reset.css";
</style>